"use client"

import { useRef } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

interface DataMatrixProps {
  data: {
    matrix: number[][]
    previousMatrix?: number[][]
  }
}

const HEADERS = [
  "plan",
  "read",
  "sport",
  "program",
  "no_smoke",
  "absorb",
  "precept"
];

export default function DataMatrix({ data }: DataMatrixProps) {
  const { matrix } = data
  const containerRef = useRef<HTMLDivElement>(null)

  // 检查是否达到目标值
  const meetsTarget = (value: number) => value > 85

  return (
    <div ref={containerRef} className="w-full h-full flex items-center justify-center p-1 sm:p-2 md:p-4 overflow-auto">
      <div className="grid auto-rows-auto gap-1 sm:gap-1.5 md:gap-2 w-auto h-auto">
        {/* 表头行 */}
        <div className="grid grid-cols-7 gap-1 sm:gap-1.5 md:gap-2">
          {HEADERS.map((header, index) => (
            <div
              key={`header-${index}`}
              className="text-center text-xs sm:text-xs font-mono text-gray-300 bg-gray-900 bg-opacity-40 backdrop-blur-sm rounded-md py-1 sm:py-1.5 px-0.5 flex items-center justify-center w-[60px] sm:w-[70px] md:w-[80px] h-auto"
            >
              {header}
            </div>
          ))}
        </div>
        
        {/* 数据行 */}
        {matrix.map((row, rowIndex) => (
          <div key={`row-${rowIndex}`} className="grid grid-cols-7 gap-1 sm:gap-1.5 md:gap-2">
            {row.map((value, colIndex) => (
              <div
                key={`cell-${rowIndex}-${colIndex}`}
                className={cn(
                  "relative flex items-center justify-center",
                  "bg-gray-900 bg-opacity-40 backdrop-blur-sm",
                  "rounded-md overflow-hidden",
                  "w-[60px] h-[60px] sm:w-[70px] sm:h-[70px] md:w-[80px] md:h-[80px]",
                  meetsTarget(value) && "shadow-[0_0_5px_1px_rgba(192,192,192,0.3)]"
                )}
              >
                <div className="font-mono text-xs sm:text-xs md:text-sm tracking-wider">
                  {value.toFixed(2)}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}

